<!-- 大屏 -->
<template>
  <div class="main_compent">
    <div class="flex_main">
      <div class="flex_left">
        <div class="flex_left_l">
          <div class="flex_left_l_1">

          </div>
          <div class="flex_left_l_1">

          </div>
          <div class="flex_left_l_1">

          </div>
        </div>
        <div class="flex_left_con">
          <div class="flex_left_con_top">
            <BorderBox12>dv-border-box-12</BorderBox12>
          </div>
          <div class="flex_left_con_bottom">

          </div>
        </div>

      </div>
      <div class="flex_right">
        <div class="flex_right_3">

        </div>
        <div class="flex_right_3">

        </div>
        <div class="flex_right_3">

        </div>
<!--        <div class="flex_con_left">
          <div class="flex_con_left_2">

          </div >
          <div class="flex_con_left_1">

          </div>
        </div>
        <div class="flex_con_right">

        </div>-->
      </div>
    </div>
  </div>
</template>
<script>
//import { borderBox1 } from '@jiaminghi/data-view'
export default {
  //components:{borderBox1}

}
</script>

<style lang="less">
  @import "../../template.less";
  .main_compent{
    width:100%;
    height:100%;
  }

  .flex_main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    background-color: #000111;

    /*最左边 1/4*/
    .flex_left {
      display: flex;
      width: calc(100%/4 * 3);
      height: 100%;
      flex-wrap: wrap;
      .flex_left_l{
        width: calc(100% / 3);
        height: 100%;
        border: 1px solid #999;
        .flex_left_l_1{
          width:100%;
          height: calc(100% / 3);
          border: 1px solid #999;
        }
      }
      .flex_left_con{
        display: flex;
        flex-wrap: wrap;
        width: calc(100% / 3 * 2);
        height: 100%;
        background-color: #0e3156;

        .flex_left_con_top{
          display: flex;
          width: 100%;
          height: calc(100% / 3 * 2) ;
          border: 1px solid #999;
        }
        .flex_left_con_bottom{
          display: flex;
          width: 100%;
          height: calc(100% / 3) ;
          border: 1px solid #999;
        }
      }
    }
   /* !* 中间和右边 *!
    .flex_con{
      width: 100%;
      height: 100%;
      .flex_con_left{
        width: calc(100% / 3 * 2);
        height: 100%;
        .flex_con_left_2{
          width: 100%;
          height: calc(100% / 3 * 2);
          border: 1px solid #999;
        }
        .flex_con_left_1{
          width: 100%;
          height: calc(100% / 3);
          border: 1px solid #999;
        }

      }
      .flex_con_right{
        width: 100%;
        height: 100%;
      }
    }
*/
    .flex_right{
      width: calc(100%/4);
      //border: 1px solid #aff;
      height:100%;
      display: flex;
      flex-wrap: wrap;
      .flex_right_3{
        width: 100%;
        height: calc(100% / 3);
        border: 1px solid #999;
      }
      /*    .flex_right_comm{
            width: 100%;
            height: calc(100%/4);
            border: 1px solid #aff;
            box-sizing: border-box;
          }*/
    }
  }
</style>
